<template>
  <div class="form-fragment">
    <div class="form-container">
      <tbc-dynamic-form :form="dynamicForm" class="compact"/>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive} from 'vue'

export default defineComponent({

  name: 'goods-form-integral',

  setup() {
    const dynamicForm = reactive([
      {
        label: '积分使用规则', type: 'radio', field: 'use_integral_type', value: 1, options: [
          {label: '不允许使用', value: 1},
          {label: '积分加现金', value: 2},
          {label: '积分或现金', value: 3},
          {label: '只允许积分', value: 4},
        ]
      },
      {label: '最大可使用积分', type: 'input-number', field: 'use_integral', value: 0},
      {
        label: '积分赠送类型', type: 'radio', field: 'give_integral_type', value: 1, options: [
          {label: '不赠送', value: 1},
          {label: '固定积分', value: 2},
          {label: '售价百分比', value: 3},
          {label: '只允许积分', value: 4},
        ]
      },
      {label: '赠送值', type: 'input-number', field: 'give_integral', value: 0},
    ])

    // 初始化
    const init = (data: Record<string, string>): void => {
      initDynamicFormData(data)
    }

    const initDynamicFormData = (data: Record<string, string>): void => {
      dynamicForm.forEach((item: { field: string, value: number | string }) => {
        if (typeof data[item.field] !== 'undefined') item.value = data[item.field]
      })
    }

    const getFormData = (): Record<string, number | string> => {
      const form: { [k: string]: number } = {}
      dynamicForm.forEach((item: { field: string, value: number }) => form[item.field] = item.value)
      return form
    }

    return {
      dynamicForm,
      init,
      getFormData
    }
  },
})
</script>